<template>
  <custom-page>
    <view>
      <view style="background-color: #FFFFFF;">
        <u-cell-group
            :border="false">
          <u-cell
              :titleStyle="{'font-size':'38rpx'}"
              size="large"
              title="历史缴费"
          ></u-cell>
        </u-cell-group>
        <view class="repairList" v-for="(item,index) in List" :key="index" @click="goDetail(item)">
          <text>{{item.fee_date}}</text>
          <span>{{item.room.building_number+item.room.name}}</span>
          <u-tag :text="item.status == 0? '待缴费':'已缴费'"  size="mini" :type="item.status == 0 ?  'warning':'success'" shape="circle" @click="goDetail(item)"></u-tag>
        </view>
        <!-- <view class="repairList">
          <text>2000-12-12</text>
          <span>门把手坏了</span>
          <u-tag text="完毕" size="mini" type="success" shape="circle"></u-tag>
        </view> -->
        <!-- <view class="repairList">
          <text>2000-12-12</text>
          <span>门把手坏了</span>
          <u-tag text="接报" size="mini" type="primary" shape="circle"></u-tag>
        </view> -->
      </view>

    </view>
  </custom-page>
</template>

<script>
	import Api from '@/util/api.js'
export default {
	data() {
		return {
			userInfo:'',		//用户详情
			List:[],			//记录详情		
		}
	},
	onLoad() {
		var that = this
		that.checkUser()
		that.getRecordList()
	},
	methods: {
		// 检查用户信息
		checkUser(){
			var that  = this
			var userInfo = that.userInfo;
				if(localStorage.getItem('userInfo')){
					that.userInfo = JSON.parse(localStorage.getItem('userInfo'))
				}else{
					uni.showToast({
					    icon: 'none',   
					    duration: 3000,
					    title: "当前用户未登录"
					});
					return;
				}
		},
		
		// 获取用户全部缴费记录
		getRecordList(){
			var that = this
			var data = {
				user_id:that.userInfo.id
			}
			Api.getRecordList(data).then(res=>{
				console.log('获取成功',res)
				that.List = res.data
			})
		},
		
		goDetail(e){
			var that = this
			console.log('选中',e.id)
			
			uni.navigateTo({
				url:'./pay?id='+ e.id
			})
			
		}
		
		
	},
}
</script>
<style lang="scss">
	.repairList {
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		align-items: center;
	}
</style>
